<template>
  <div>
    <el-popover
      v-model="show"
      placement="bottom"
      width="600"
      trigger="manual"
    >
      <div class="dialog" slot="default">
        <div class="dialog__left" @click="handleClickLeft">
          <div
            v-for="g in groupNameList"
            class="flex dialog__item"
            :key="g"
            @mouseover="handleToggleGroup(g)"
            :class="{'dialog__item--selected':selectedGroup===g}"
          >
            <div class="dialog__color" :style="{backgroundColor:'rgba'+ groupedValueMap[g][0].extendInfo}">
            </div>
            {{ g }}
          </div>
        </div>
        <div class="dialog__right">
          <div class="dialog__right-inner">
            <div
              @click="handleToggleColor(i)"
              v-for="i in groupedValueMap[selectedGroup]"
              class="flex dialog__colorWrap"
              :key="i.value"
            >
              <div class="dialog__color" :style="{backgroundColor:'rgba'+ i.extendInfo}">
              </div>
              <div class="dialog__colorTitle">
                {{ i.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-input
        slot="reference"
        v-model="inputValue"
        ref="input"
        class="input"
        :placeholder="placeholder"
        @blur="handleBlur"
        @click.native="handleClick"
      />
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'DialogSelector',
  data() {
    return {
      inputValue: this.value,
      show: false,
      selectedGroup: ''
    }
  },
  computed: {
    groupedValueMap() {
      if (this.options.length) {
        return this.options.reduce((r, a) => {
          const key = a.group && a.group.title || ''
          r[key] = r[key] || []
          r[key].push(a)
          return r
        }, {})
      }
      return {}
    },
    groupNameList() {
      return Object.keys(this.groupedValueMap)
    }
  },
  watch: {
    groupNameList() {
      if (!this.selectedGroup) {
        this.selectedGroup = this.groupNameList[0]
      }
    },
    show() {
      if (this.show) {
        this.selectedGroup = this.groupNameList[0]
      }
    },
    // 单向
    inputValue() {
      if (this.inputValue) {
        this.show = false
      }
      // this.$emit('input', this.inputValue)
    },
    value() {
      this.inputValue = this.value
    }
  },
  created() {
    if (this.groupNameList && this.groupNameList.length) {
      this.selectedGroup = this.groupNameList[0]
    }
  },
  methods: {
    handleClickLeft() {
      this.clickFlag = true
      this.$refs.input.focus()
    },
    handleToggleColor(c) {
      if (this.beforeChange && this.beforeChange(c.value) === false) {
        return
      }
      this.inputValue = c.value
      this.$refs.input.focus()
    },
    handleToggleGroup(g) {
      this.selectedGroup = g
    },
    getInputValueId() {
      const founded = this.options.find(el => el.value === this.inputValue) || {}
      return founded.id || 0
    },
    handleBlur() {
      setTimeout(() => {
        if (this.clickFlag) {
          this.clickFlag = false
          return
        }
        this.show = false
        this.$emit('blur', { value: this.inputValue, id: this.getInputValueId() })
      }, 100)
    },
    handleClick() {
      if (this.inputValue) {
        return
      }
      this.show = true
    }
  },
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    beforeChange: {
      type: Function,
      default: null
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  display: grid;
  grid-template-columns: 100px 1fr;

  &__colorWrap {
    cursor: pointer;
    padding: 10px;

    &:hover {
      background-color: rgb(238, 247, 255);
    }
  }

  &__right-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: max-content;
  }

  &__left {
    border-right: 1px solid #eee;
  }

  &__item {
    padding: 10px;
    cursor: pointer;

    &--selected {
      background-color: rgb(238, 247, 255);
    }
  }

  &__color {
    border: 1px solid #eee;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
</style>
